import React, { memo, useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import { Tabs, Popup } from "antd-mobile";
import { AppstoreOutline, SearchOutline } from "antd-mobile-icons";
import { useInitialState } from "@/utils/use-initial-state";
import { getArticleList, getUserChannel } from "@/store/actions/home";
import Channels from "./components/Channels";
import HomeList from "@/components/HomeList";
import styles from "./index.module.scss";

const Home = memo(() => {
  // 使用自定义 Hook 获取用户频道
  const { userChannel } = useInitialState(getUserChannel, "home");
  const [visible, setVisible] = useState(false); // 控制弹出层显示与隐藏
  const [activeKey, setActiveKey] = useState("0"); // 控制当前选中的标签页
  const dispatch = useDispatch(); // 获取 dispatch 函数
  const history = useHistory(); // 获取 history 对象
  const storedItem = localStorage.getItem("HomeListItem");

  useEffect(() => {
    // 当组件挂载时，从 localStorage 中获取 HomeListItem，并设置选中的标签页
    if (storedItem) {
      const { id, name } = JSON.parse(storedItem);
      setActiveKey(id);
      dispatch(getArticleList(id, Date.now().toString()) as any);
    } else {
      dispatch(getArticleList(0, Date.now().toString()) as any);
    }
    // return () => {
    //   localStorage.removeItem("HomeListItem");
    // };
  }, [storedItem]); // 依赖数组为空，表示仅在组件挂载时执行

  // 打开弹出层
  const onChannelOpen = () => {
    setVisible(true);
  };

  // 关闭弹出层
  const onChannelClose = () => {
    setVisible(false);
  };

  // 点击搜索按钮，跳转到搜索页面
  const handleSearchClick = () => {
    history.push("/search");
  };

  // 当tabs标签被切换时
  const onChangeTabs = async (e: any) => {
    let item = JSON.parse(storedItem!);
    item.id = e;
    localStorage.setItem("HomeListItem", JSON.stringify(item));
    setActiveKey(e);
    await dispatch(getArticleList(e, Date.now().toString()) as any);
  };
  return (
    <div className="home">
      <div className={styles.customHeader}>
        {/* 标签页 */}
        <Tabs
          className={styles.tabs}
          activeKey={activeKey}
          onChange={(e) => onChangeTabs(e)}
        >
          {userChannel.map((item: { name: string; id: number }) => (
            <Tabs.Tab title={item.name} key={item.id}></Tabs.Tab>
          ))}
        </Tabs>
        {/* 搜索按钮 */}
        <SearchOutline
          className={styles.moreIcon}
          onClick={handleSearchClick} // 点击搜索按钮时触发跳转到搜索页面的函数
        />
        {/* 频道按钮 */}
        <AppstoreOutline
          className={styles.moreIcon}
          onClick={onChannelOpen} // 点击频道按钮时触发打开弹出层的函数
        />
      </div>
      <div className={styles.bodyContainer}>
        {/* 首页列表组件 */}
        <HomeList q={"html"}></HomeList>
      </div>
      {/* 弹出层 */}
      <Popup
        position="left"
        visible={visible}
        showCloseButton
        onClose={onChannelClose} // 点击关闭按钮时触发关闭弹出层的函数
        bodyStyle={{ height: "100%", width: "100vw" }}
      >
        {/* 频道组件 */}
        <Channels onClose={onChannelClose} />
      </Popup>
    </div>
  );
});

export default Home;
